<template>
  <div class="index">
    <!-- 页面顶部 start -->
    <div class="ad">
      <img width="100%" src="/img/index/20200623230029_9756.png" alt="">
      <span class="imm-attention">立即关注</span>
    </div>
    <!-- 页面顶部 end -->

    <!-- 页面底部 start-->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="index">
        <span
          v-if="selected !== `index`"
          class="icon-bg icbg1"
          slot="icon"
        ></span>
        <span v-else class="icon-bg active-ic1" slot="icon"></span>
        首页
      </mt-tab-item>
      <mt-tab-item id="renew">
        <span
          v-if="selected !== `renew`"
          class="icon-bg icbg2"
          slot="icon"
        ></span>
        <span v-else class="icon-bg active-ic2" slot="icon"></span>
        换新机
      </mt-tab-item>
      <mt-tab-item id="recycle">
        <span
          v-if="selected !== `recycle`"
          class="icon-bg icbg3"
          slot="icon"
        ></span>
        <span v-else class="icon-bg active-ic3" slot="icon"></span>
        回收站
      </mt-tab-item>
      <mt-tab-item id="aboutMe">
        <span
          v-if="selected !== `aboutMe`"
          class="icon-bg icbg4"
          slot="icon"
        ></span>
        <span v-else class="icon-bg active-ic14" slot="icon"></span>
        我的
      </mt-tab-item>
    </mt-tabbar>
    <!-- 页面底部 end-->
  </div>
</template>
<style lang="scss">
.index {
  // 页面顶部广告
  .ad{
    position: relative;
    width: 100%;
    height: 60px;
  }
  .imm-attention{
    position: absolute;
    top: 50%;
    margin-top: -30px;
    right: 0;
  }
  // 页面底部导航栏
  .icon-bg {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url("/img/index/20200413104656_7617.png") no-repeat;
    background-size: 25rem;
  }
  .icbg1 {
    background-position: 0px 0;
  }
  .icbg2 {
    background-position: -122px 0;
  }
  .icbg3 {
    background-position: -254px 0;
  }
  .icbg4 {
    background-position: -376px 0;
  }
  .active-ic1 {
    background-position: 0px -40px;
  }
  .active-ic2 {
    background-position: -122px -40px;
  }
  .active-ic3 {
    background-position: -254px -40px;
  }
  .active-ic4 {
    background-position: -376px -40px;
  }
}
</style>
<script>
export default {
  data() {
    return {
      selected: "index",
    };
  },
  watch: {
    selected(newVal) {
      if(newVal=="index"){
        this.$router.push("/index");
      }else if(newVal=="renew"){
        this.$router.push("/renew");
      }else if(newVal=="recycle"){
        this.$router.push("/recycle");
      }else if(newVal=="aboutMe"){
        this.$router.push("/aboutMe");
      }
    },
  },
};
</script>

